<template>
  <div id="app" class="bg">
    登录页面
    <div id="login">
      <el-form :model="loginForm" label-width="80px">
        <el-form-item label="用户名：">
          <el-input
            v-model="loginForm.ename"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input
            type="password"
            v-model="loginForm.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码：">
          <el-input
            v-model="loginForm.verifycode"
            placeholder="请输入验证码"
          ></el-input>
          <img :src="verifycodesrc" @click="createverifycode" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {},
      verifycodesrc: "",
      uuid: "",
    };
  },
  mounted() {
    this.createverifycode();
  },
  methods: {
    //验证码
    createverifycode() {
      this.$axios.get("verifyCode/create?t=" + new Date()).then((resp) => {
        if (resp.data.code == 200) {
          this.verifycodesrc = resp.data.data.code;
          this.uuid = resp.data.data.uuid;
        }
      });
    },

    //登录按钮
    login() {
      this.$axios
        .post(
          "/employee/login?ename=" +
            this.loginForm.ename +
            "&password=" +
            this.loginForm.password +
            "&verify=" +
            this.loginForm.verifycode +
            "&uuid=" +
            this.uuid
        )
        .then((resp) => {
          if (resp.data.code == 200) {
            window.localStorage.setItem("token", resp.headers.token);
            this.$message(resp.data.msg);
            // let username = this.loginForm.ename;
            // window.localStorage.setItem("currentUserName",username);
            this.$router.push({ name: "/main", params: { ename: this.loginForm.ename } });
         } else {
            this.createverifycode();
            this.$message(resp.data.msg);
          }
        });
    },
  },
};
</script>

<style>
.bg {
  background: url(../assets/12.jpg) no-repeat center center;
  background-size: cover;
  height: 1024px;
  width: 100%;
}
#login {
  padding-top: 100px;
  width: 500px;
  margin: 0px auto;
}
</style>